<template>
	<view class="message-info">
		<bnn-loading :loading="isLoading"/>
		<view class="info-box">
			<view class="msg-title d-f j-c-c">{{info.messageInfo && info.messageInfo.title}}</view>
			<view class="msg-content">{{info.messageInfo && info.messageInfo.content}}</view>
			<view class="msg-time d-f j-c-e">{{(info.messageInfo && info.messageInfo.created_at) | parseTime}}</view>
		</view>
	</view>
</template>

<script>
	import {getUserMessageInfo} from '@/api/member.js'
	import BnnLoading from '@/components/bnn-ui/loading/index.vue'
	
	export default {
		components: {BnnLoading},
		data() {
			return {
				isLoading: true,
				info: {}
			}
		},
		onLoad(options) {
			this.getMessageInfo(options.id)
		},
		methods: {
			getMessageInfo(id) {
				getUserMessageInfo({id}).then(res => {
					this.isLoading = false
					this.info = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.message-info{
		/* #ifdef APP-PLUS */
		height: 100vh;
		/* #endif*/
		
		/* #ifndef APP-PLUS */
		height: calc(100vh - var(--window-bottom));
		/* #endif*/
		background-color: #fff;
		.info-box{
			padding: $theme_padding;
		}
		.msg-title{
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		.msg-content{
			color: #666;
			margin-bottom: 20rpx;
		}
		.msg-time{
			color: #999;
			font-size: 24rpx;
		}
	}
</style>
